<template>
    <div class="region">
        <div class="content">
            <div class="left">地区：</div>
            <ul>
                <li @click="changeRegion('')" :class="{ active: flag == '' }">全部</li>
                <li :class="{ active: flag == item.value }" @click="changeRegion(item.value)" v-for="item in dictData" :key="item.value">{{ item.name }}</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getHospitalLevelAndRegionAPI } from '@/api/home';
import { HospitalDicData, HospitalDictArr } from '@/api/home/type';
import { onMounted, ref } from 'vue';

onMounted(() => {
    getDictData()
})
let dictData = ref<HospitalDictArr>([])
let flag = ref<string>('')
const getDictData = async () => {
    let res: HospitalDicData = await getHospitalLevelAndRegionAPI('Beijin')
    dictData.value = res.data
}
const changeRegion = (value: string) => {
    flag.value = value
}
</script>

<style scoped lang="scss">
.region {
    color: #7f7f7f;
    margin: 20px 0;
    white-space: nowrap;

    .content {
        display: flex;

        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                margin: 0 0 10px 10px;

                &.active {
                    color: #55a6fe;
                }

                &:hover {
                    color: #55a6fe;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>